<template>
	<el-row>
			<!--  搜索操作区 -->
		    <el-row class="pb10  little-header">
		          <el-col  :span='17'  >
		                <div class=' w-100 ' align='left'>
		                    <el-input  placeholder='请输入名称' v-model='search.name' class='w-28'></el-input>
		                    <el-button icon="el-icon-search" type='primary' @click='pageInit()'>搜索</el-button>
		                </div>
		          </el-col>
		          <el-col  :span='5'  :offset='1' >  
		                <div align="right" class=' mr20 '>

		                        <el-button  class='export-icon'               size="small" round   @click="handleExport()"><i class='fa fa-share pr5'></i>导出</el-button>
		                </div>
		          </el-col>
		    </el-row>
		    <el-row class='pb10 text-left' >
		    	    <!-- <router-link to='/project/lift'><el-button   type="primary"  size="small" round  plain>服务费</el-button></router-link> -->
		          <router-link to=''><el-button   type="primary"  size="small" round plain>服务费</el-button></router-link>
		          <router-link to=''><el-button   type="primary"  size="small" round plain>归档</el-button></router-link>
		          <!-- <el-button  type="danger"  size="small" round @click="handleDelete(list.$index, list.row)">删除</el-button> -->
		    </el-row>
		    <!-- table -->
		    <el-table border  :data="tableList"   :cell-class-name='hover'  @cell-click='checkUser'>
		          <el-table-column   width="40">
		                <template  slot-scope="scope">
		                      <el-checkbox  v-model='scope.row.checked'  @change='(val)=>changeSelect(val,scope.row)'></el-checkbox>
		                </template>
		          </el-table-column>
		          <el-table-column prop="name"            label="标的名称"     align="center"  v-if='tableName.name==true'></el-table-column>
		          <el-table-column prop="status"            label="标的状态"   align="center"  v-if='tableName.pro_state==true'></el-table-column>
		          <el-table-column prop="productName"            label="产品名称"     align="center"  v-if='tableName.pro_name==true'></el-table-column>
		          <el-table-column prop="underwriter"            label="承销商"     align="center"  v-if='tableName.chengxiao==true'></el-table-column>
		          <el-table-column prop="collectionAmt"            label="募集金额"     align="center"  v-if='tableName.money==true'></el-table-column>
		          <el-table-column prop="type"            label="服务费状态"     align="center"  v-if='tableName.service_state==true'>
		                <template  slot-scope='list'>
		                      {{list.row.type | pro_type}}
		                </template>
		          </el-table-column>
		          <el-table-column prop="collectionAccount"            label="募集账户"     align="center"  v-if='tableName.account==true'>
		                
		          </el-table-column>
		          <el-table-column prop="issueAccount"            label="发行人账户"     align="center"  v-if='tableName.setup==true'>
		                <template slot-scope="scope">
		                      {{scope.row.status | pro_status}}
		                </template>
		          </el-table-column>
		          <el-table-column prop="investorNum"            label="投资人"     align="center"  v-if='tableName.invest==true'></el-table-column>
		          <el-table-column prop="residualRepayTerms"            label="期限（天）"     align="center"  v-if='tableName.limit==true'></el-table-column>
		          <el-table-column prop="foundDate"      label="成立日期"     align="center"  v-if='tableName.startDay==true'>
		                <template slot-scope="scope">
		                      {{scope.row.modifyTime | formatDate}}
		                </template>
		          </el-table-column>
		          <el-table-column    prop='valueDate'  label="起息日期"     align="center"  v-if='tableName.calDay==true'>
		                <template slot-scope="scope">
		                      <!-- {{scope.row.modifyTime | formatDate}} -->
		                </template>
		          </el-table-column>
		          <el-table-column   prop='dueDate'    label="到期日期"     align="center"  v-if='tableName.endDay==true'>
		                <template slot-scope="scope">
		                      <!-- {{scope.row.modifyTime | formatDate}} -->
		                </template>
		          </el-table-column>
		          <el-table-column prop="modifyTime"      label="延期日期"     align="center"  v-if='tableName.delayDay==true'>
		                <template slot-scope="scope">
		                      {{scope.row.modifyTime | formatDate}}
		                </template>
		          </el-table-column>
		          <el-table-column prop="createUserName"  label="经办人"       align="center"  v-if='tableName.person==true'></el-table-column>
		      
		          <el-table-column                        label="操作"          align="center"  width="250">
		                  <template v-slot="list">
		                          <el-button type="primary" size="mini" round @click="addInvestor()"><router-link :to='{path:"/object/invest",query:{code:list.row.code,proName:list.row.name}}'>投资人</router-link></el-button>

		                          <el-button  type="primary" size="mini" round @click="edit_object(list.$index, list.row)">编辑</el-button>
		                          <el-button  type="danger" size="mini" round @click="del_object(list.row.code)">删除</el-button>
		                  </template>
		          </el-table-column>
		    </el-table>
		    <i class='icon icon-choose fl cursor'  title="表头选择" @click='changeTable()'></i>
		    <!-- 分页 -->
		    <el-pagination class='mt28'
		            background
		            @size-change="handleSizeChange"
		            @current-change="handleCurrentChange"
		            :current-page="1"
		            :page-sizes="[10, 20]"
		            :page-size="10"
		            :pager-count="5"
		            layout="total, sizes, prev, pager, next, jumper"
		            :total="Total">
		    </el-pagination>
		    <!-- //改变表头显示 -->
		    <tableName ref='NameChange'></tableName>
		    <!-- 标的编辑 -->
		    <ObjectEdit ref='objectEdit'></ObjectEdit>
	</el-row>
</template>

<script >
//接口
import  {  objectList,delObject }  from  '@/api/professional_work/object/index'
	//组件

import  ObjectEdit  from  '@/components/professional_work/object/ObjectEdit'//标的编辑
import  tableName  from  '@/components/professional_work/object/tableName' //表头选择
export default {
	name: 'underlying',
	data(){
		return {
			/*static*/

			/*active*/
			search:{
				name:'',
				limit:10,
				currentPage:1,
			},
			//表头展示与否
			tableName:{
				name:true,
				pro_state:false,
				pro_name:false,
				chengxiao:true,
				money:true,
				service_state:false,
				account:true,
				setup:true,
				invest:true,
				limit:false,
				startDay:false,
				calDay:true,
				endDay:true,
				delayDay:false,
				person:false,
			},
			search:{
				name:'',
				limit:10,
				currentPage:1,
			},
			currentCheckedCode:'',//当前选中的row code记录
			tableList:[],
			Total:null,
		}
	},
	created(){
		this.pageInit()
	},
	methods:{
		pageInit(){
			this.loading = true
			objectList(this.search).then(res=>{
				this.loading = false
				this.Total = res.data.totalRs
          		this.tableList = res.data.dataList
			})
		},
		//新增投资人
		addInvestor(){
			this.$router.push({name:''})
		},

		//编辑标的
		edit_object(index,row){
			this.$refs.objectEdit.$emit('openDialog',row)
		},
		del_object(code){
			this.$confirm('确定删除？', '提示', {
	            confirmButtonText: '确定',
	            cancelButtonText: '取消',
	            type: 'warning'
	        })
	        .then(() => {
	        	this.loading=true
				let that =this
			    // console.log(code)
			      delObject(code).then(res => {
			          this.loading = false
			          this.$message({type:'success',message:res.data.msg})
			          this.pageInit()
			      })
			      .catch(error => {
			            this.loading = false
			            that.outputError(error)
			      })
			})
		},
		hover({row, column, rowIndex, columnIndex}){
	    // console.log(row, column, rowIndex, columnIndex)
	    //设置表格第一列的特殊样式  该样式需要在APP 或者 public.css设置   
	      // if(columnIndex == 1 ){  //这里不能用index来判断，因为表头会动态改变
	      //   return 'activeCol'
	      // }
	      if(column.label == '标的名称' || column.label == '投资人'){
	            return 'activeCol'
	      }
	    },
	    //点击列中的数据改变 
	    checkUser(row, column, cell, event){
	        // console.log(row, column, cell, event)
	        if(column.label == '标的名称'){
	            this.$router.push({path:'/object/detail',query:{code:row.code}})
	        }
	    },

	    //改变表头显示
	    changeTable(){
	        this.$refs.NameChange.$emit('openDialog',this.tableName)
	    },
	    //列 单选操作
	    changeSelect(val,row){
	      //是否选中
	      if(val == true){
	          //当前选中值 是否有值
	          if(this.currentCheckedCode != ''){
	              this.currentCheckedCode.checked = false
	              this.currentCheckedCode = ''
	          }
	          this.currentCheckedCode = row
	      }
	      else{
	          this.currentCheckedCode.checked = false
	          this.currentCheckedCode = ''
	      }
	    },


	    /*每页显示条数变化 事件触发
     *@method 方法名
     *@for 所属类名
     *@param{val} 共几条
     *@return {} 
    */
    handleSizeChange(val) {
      this.search.limit = val;
      this.pageInit()
    },
    /*页数变化 事件触发
     *@method 方法名
     *@for 所属类名
     *@param{val} 第几页
     *@return {} 
    */
    handleCurrentChange(val) {
      this.search.currentPage = val
      this.pageInit()
    },
	},
	components:{
		tableName,
    	ObjectEdit,
	}
}
</script>

<style type="text/css" scoped>
.icon{display: inline-block;width: 32px;height: 32px;}
.icon-choose{background: url('../../assets/images/img/option/icon-choose.png') no-repeat;}
</style>